<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!--引入layui  -->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
	<!--引入layui  -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<!--引入jquery  -->
<body>
	<!-- 查询条件DIV-->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">内容:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" name="content" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">查询条件:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<select name="isReply" autocomplete="off" class="layui-input" >
				<option value="">请选择</option>
				<option value="1">已回复</option>
				<option value="0">未回复</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
	<!-- 编辑的弹层DIV  -->
	<div id="editDIV" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">回复</label>
				<div class="layui-input-inline" style="width: 350px;">
					<textarea rows="15" cols="10" name="reply" class="layui-input" 
					autocomplete="off" lay-verify="required"></textarea>
					<input type="hidden"  name="id" > <!--隐藏域，用来保存id的值-->		
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
				<button class="layui-btn" lay-filter="editSubmitBtn" lay-submit="">回复</button>
			</div>
		</form>
	</div>

	<!--定义数据表格table  -->
	<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
	<!--	表格里操作栏的查看、编辑等按钮  -->
	<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
		{{# if (d.isReply == 0){}}
           <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit"><i class="layui-icon">&#xe642;</i>回复</a>	
        {{# } }}
	</script>
	<script>
	/*定义好各种组件   */
	layui.use(['laydate','layer','form','table','tree','upload'], function() {
		var laydate = layui.laydate	//日期组件
			,layer = layui.layer	//弹层组件
			,form = layui.form		//表单组件
			,tree = layui.tree		//树形结构组件
			,upload = layui.upload  //上传组件
			,$= layui.jquery    	//jquery
			,table = layui.table;	//表格组件
		
		//使用表格组件，渲染表格，填充数据
	 	table.render({
			elem: '#proTable',	 				//表格的id		
			url: 'findComment.do',			//提交到后台的地址
			method: 'get', 						//请求方式
			even: true, 						//隔行变色			
			page: true,							//开启分页			
			toolbar: '#toolbarDemo', 			//开启头部工具栏
			title: '产品表', 					//表格名称		
			cols: [ //定义所有列的，第一列是复选框列，最后一列是操作列，中间的是数据列
				[{
					field: 'ck',   				//固定值，这一列是复选框
					fixed: 'left', 				//表示靠左固定（只有left和right两个值）
					type: 'checkbox', 			//表示复选框
					width: 100      			
				},{
					field: 'id',	//字段属性
					align:'center', //数据对齐
					width: 80,	    //宽度（可选）
					title: '评价编号',	//名称
					sort: true		//开启排序（可选）
				},{
					field: 'uName',
					width: 80,
					title: '用户名称',
				},{
					field: 'pName',
					width: 150,
					title: '产品名称'
				},{
					field: 'accordRating',
					width: 120,
					title: '描述等级',
					fixed: 'right', 
					templet: function (d) {
						 if (d.accordRating == 1) {
							 return '<div style="color:#5FB878;" >❤</div>';
						  }else if(d.accordRating == 2){
							 return '<div style="color:#FF5722;" >❤❤</div>';
						  }else if(d.accordRating == 3){
							 return '<div style="color:#FFB800;" >❤❤❤</div>';
						  }else if(d.accordRating == 4){
							  return '<div style="color:#1E9FFF;" >❤❤❤❤</div>';
						  }else if(d.accordRating == 5){
							  return '<div style="color:#2F4056;" >❤❤❤❤❤</div>';
						  }
					   }
				},{
					field: 'expressRating',
					title: '物流等级',
					width: 120,
					fixed: 'right', 
					templet: function (d) {
						 if (d.expressRating == 1) {
							 return '<div style="color:#5FB878;" >❤</div>';
						  }else if(d.expressRating == 2){
							 return '<div style="color:#FF5722;" >❤❤</div>';
						  }else if(d.expressRating == 3){
							 return '<div style="color:#FFB800;" >❤❤❤</div>';
						  }else if(d.expressRating == 4){
							  return '<div style="color:#1E9FFF;" >❤❤❤❤</div>';
						  }else if(d.expressRating == 5){
							  return '<div style="color:#2F4056;" >❤❤❤❤❤</div>';
						  }
					   }
				},{
					field: 'serverRating',
					width: 120,
					title: '服务等级',
					fixed: 'right', 
					templet: function (d) {
						 if (d.serverRating == 1) {
							 return '<div style="color:#5FB878;" >❤</div>';
						  }else if(d.serverRating == 2){
							 return '<div style="color:#FF5722;" >❤❤</div>';
						  }else if(d.serverRating == 3){
							 return '<div style="color:#FFB800;" >❤❤❤</div>';
						  }else if(d.serverRating == 4){
							  return '<div style="color:#1E9FFF;" >❤❤❤❤</div>';
						  }else if(d.serverRating == 5){
							  return '<div style="color:#2F4056;" >❤❤❤❤❤</div>';
						  }
					   }
				},{
					field: 'content',
					width: 120,
					title: '评价内容',
				},{
					field: 'reply',
					width: 120,
					title: '回复内容',
				},{
					field: 'replyTime',
					width: 120,
					title: '回复时间',
				},{
					fixed: 'right',
					width: 150,
					title: '操作',
					toolbar:'#barDemo'
				}]
			]
		});
		
			
	 	/*
			条件查询
		*/
	    form.on('submit(search)', function (data) {
	        var field = data.field;
	        //执行重载
	        table.reload('proTable', {
	            page: { curr: 1 },
	            where: field
	        });
	    }); 
		
		
		// 表格数据里的事件监听（点击操作列里的按钮，比如查看详情等进来这里）
		table.on('tool(filterTable)',function(obj){
			var data = obj.data;	//	获取当前行的数据
			var event = obj.event;	// 	获取lay-event的值(根据这个值来判断是什么按钮)
			if(event == 'edit'){	// 编辑操作
				// 清空form里的数据
				$("#editForm")[0].reset();
				//数据回显
				form.val("editForm",data);
				//打开弹层
				layer.open({
					type: 1,
					title: '您正在回复编号为【'+data.id+'】信息',
					content: $("#editDIV"),
					area: ['60%','80%']
				});
				
			}else if(event == 'del'){
				if(confirm("确定删除吗？")){
					//	使用ajax发送请求给后台（调用servlet）
	    			$.ajax({
						type: 'post', 				//请求方式
						url: 'deleteComment.do',	//请求路径	 			
						data: {"id":data.id}, 		//请求参数：“id”是参数名称，参数值从当前行的数据里获取		
						dataType: 'json', 			//返回格式	
						success: function(res) { 	//提交成功	
							layer.alert(res.msg);	
							table.reload('proTable',{page:{curr:1}}) 	
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
	    		}
			}
				
			
		});
		
		
		 //监听修改弹层的提交按钮（当点击修改弹层的提交按钮执行这里）
		  form.on('submit(editSubmitBtn)', function (data) {
			  $.ajax({
					type: 'post', 				
					url: 'updateComment.do',	 				
					data: $("#editForm").serialize(),
					dataType: 'json', 				
					success: function(res) { //提交成功
						 layer.alert(res.msg, {
				              icon: 6
				            }, function () {
				            	//关闭弹层
				            	layer.closeAll();
				            	//刷新表格
				            	table.reload('proTable',{page:{curr:1}});
				            });
					},
					error: function() { //提交失败
						alert("系统异常！！")
					}
				}); 

		    return false;
		  });
	});
	
	
	</script>

</body>
</html>